<template>
 <div class="news_list pd_40">
   <div>
     <el-row :gutter="40">
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">消息内容</span>
          <el-input
            placeholder="请输入"
            v-model="input2">
          </el-input>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">发送时间</span>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">发送状态</span>
             <el-select v-model="value" placeholder="全部">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
      </el-col>

      <el-col class='mg_t20' :span="7">
        <div class="fsc">
          <span class="articlelist_lable">消息分类</span>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </el-col>
     </el-row>
     <p class="articlelist_query fbc">
      <router-link to="/news/publish"><el-button type="primary">发布消息+</el-button></router-link>
      <el-button type="primary">查询</el-button>
    </p>
   </div>
   <div>
     <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="date"
        label="发送时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="消息内容"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="发布者">
      </el-table-column>
      <el-table-column
        prop="address"
        label="消息分类">
      </el-table-column>
      <el-table-column
        prop="address"
        label="送达人数">
      </el-table-column>
      <el-table-column
        prop="address"
        label="查看人数">
      </el-table-column>
      <el-table-column
        prop="address"
        label="定时发送时间">
      </el-table-column>
      <el-table-column
        prop="address"
        label="发送状态">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="centerDialogVisible = true" type="primary" size="small">管理</el-button>
        </template>
      </el-table-column>
    </el-table>
   </div>
  <div class="block fec mg_t30">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="40">
    </el-pagination>
  </div>

  <!--点击管理alert-->
  <el-dialog
    title="评级管理"
    :visible.sync="centerDialogVisible"
    width="20%"
    center>
    <div class="fbc fwrap pd_40">
      <el-button @click="index=1" :type="index==1?'success':''">定时发送</el-button>
      <el-button @click="index=2" :type="index==2?'success':''">撤回消息</el-button>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini"  @click="submitForm('ruleForm')">确定</el-button>
      <el-button type="primary" size="mini"  @click="resetForm('ruleForm')">取消</el-button>
    </span>
  </el-dialog>
 </div>

 
</template>
<script>
export default {
  data() {
    return {
      index: 1,    //dialog里button
      value: '',
      input2: '',
      input3: '',
      value4: '',
      value1: '',
      currentPage4: 4,
      centerDialogVisible: false,

      options: [{
          value: '选项1',
          label: '全部'
        }, {
          value: '选项2',
          label: '等待审核'
        }, {
          value: '选项3',
          label: '审核通过'
        }, {
          value: '选项4',
          label: '驳回修改'
        }, {
          value: '选项5',
          label: '已下架'
        }],
        
        
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区 弄'
        }]
    }
  },
  methods: {

    
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    submitForm(formName) {
        this.centerDialogVisible = false;
        this.$refs[formName].validate((valid) => {
            if (valid) {
            alert('submit!');
            } else {
            console.log('error submit!!');
            return false;
            }
        });
    },
    resetForm(formName) {
        this.centerDialogVisible = false;
        this.$refs[formName].resetFields();
    }
  },
  
}
</script>
<style scoped lang="less">
  .articlelist_lable {
    min-width: 20%;
    white-space: nowrap;
  }
  .articlelist_query {
    margin-right: 100px;
    height: 100px;
  }
</style>

